<template>
    <div class="person">
       <h1>监控水温和水量</h1>
       <h2>水温{{ temp }}</h2>
       <h2>水量{{ amount }}</h2>
       <button @click="addTemp">升温</button>
       <button @click="addWater">加水</button>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'person'
    }
</script>

<script lang="ts" setup>
    import {reactive, ref, watch, watchEffect } from 'vue';

    let temp = ref(24);
    let amount = ref(50);

    function addTemp(){
        temp.value += 1;
    }

    function addWater(){
        amount.value += 1;
    }

    // 用watch执行
    // watch([temp,amount],(value)=>{
    //     let [newT,newA] = value
    //     if(newT > 30 || newA > 100){
    //         alert('水温or水量过高')
    //         console.log('发送请求')
    //     }
    // })

    // 用watchEffect执行
    watchEffect(()=>{
        if(temp.value > 30 || amount.value > 100){
            alert('水温or水量过高')
            console.log('发送请求')
        }
    })

</script>

<style>
    input{
        border-radius: 5px;
    }
</style>